브라우저 렌더링 파이프라인

❓질문

브라우저 렌더링 파이프라인에 대해서 설명해주세요.

💡 조사하기전 내가 알고 있던 내용

브라우저 렌더링 파이프라인은
1.Dom을 생성
2.Cssom을 생성
3.이를 합쳐서 렌더트리 생성
4.렌더트리를 바탕으로 레이아웃을 그림
5.페인팅 작업
6.컴포지팅 작업을 진행합니다

🏫 정리한 내용

첫번째로 DOM을 생성합니다

브라우저가 HTML 파일을 받으면 이 파일을 바이트 단위로 읽기 시작합니다 HTML 파서가 바이트를 문자로 변환하고 이를 HTML 토큰으로 변환합니다 토큰은 각각의 태그와 텍스트 속성 등을 의미하고있습니다 이를 기반으로 DOM 트리를 생성합니다
DOM트리는 부모 - 자식관계를 가지고있습니다

두번째로 CSSOM을 생성합니다

브라우저가 CSS파일을 받아 이를 파싱합니다 역시 바이트 단위로 들어오며 이를 문자로 변환하여 규칙으로 나눕니다 이 규칙을 기반으로 CSSOM 트리를 생성합니다 DOM과 유사한 트리 구조로 형성 됩니다.

세번째로 렌더 트리를 생성합니다

이제 브라우저는 DOM과 CSSOM 을 결합하여 렌더 트리를 생성합니다 이때 실제로 보이는 요소들로만 구성됩니다 display : none 속성이있는 요소는 렌더 트리에 포함되지않습니다.

네번째로 레이아웃 입니다

렌더 트리가 생성된 후, 브라우저는 이 트리를 이용해 각 요소의 정확한 위치와 크기를 계산합니다. 이 과정이 바로 레이아웃입니다. 레이아웃 과정에서는 렌더 트리의 각 노드가 화면의 어디에 위치 할지, 그리고 얼마나 큰지를 계산하게 됩니다.

다섯번째로 페인팅 입니다.

레이아웃이 완료되면 브라우저는 각 요소를 실제 화면에 그리는 작업을 시작합니다. 이를 페인팅이라고 합니다 이 단계에서 텍스트 , 색상 , 그림자 , 이미지등 모든 시작적 요소가 화면에 그려집니다.

마지막 단계로 컴포지팅입니다.

브라우저는 화면에 그려질 요소들을 각각의 레이어로 분리하고 이 레이어들을 결합하여 최종화면을 구성합니다. 이 과정에서는 GPU를 활용하여 각 레이어를 빠르게 합성합니다.